<template>
  <!-- #ifndef H5 -->
  <u-navbar title="采购订单详情" fixed border leftIcon="" leftText=""></u-navbar>
  <!-- #endif -->
  <!-- #ifdef H5 -->
  <u-navbar title="采购订单详情" fixed border @leftClick="navigateBack" @rightClick="navigateHome">
    <template #right>
      <u-icon name="home" size="24"></u-icon>
    </template>
  </u-navbar>
  <!-- #endif -->
  <view class="page_wrap_container" :style="{ paddingTop: NavBarHeight + 'px' }">
    <scroll-view :style="{ height: windowHeight+ 'px' }" scroll-y enable-flex :show-scrollbar="false"
      class="purchase_page_list">
      <view class="list_item">
        <view class="list_item_header">
          <view class="lih_title">{{ pageDetails.supplierName }}</view>
          <view class="lih_tag"><up-tag :borderColor="ORDER_COLOR_MAP[pageDetails?.status]"
              :color="ORDER_COLOR_MAP[pageDetails?.status]" :text="ORDER_STATUS_TEXT[pageDetails?.status]"
              plain></up-tag></view>
        </view>
        <view class="list_item_img_box">
          <view class="liib_item" v-for="(it, idx) in pageList" :key="it.id">
            <template v-if="pageList?.length > 3 && expandFlag ? idx < 3 : true">
              <view class="liibi_main">
                <view class="lm_imgbox">
                  <image :src="it.pictureUrl" alt="" />
                </view>
                <view class="lm_textbox">
                  <view class="liibi_title_box">
                    <view class="left_main_title text_ellipsis">{{ it.productName || '-' }}</view>
                    <view class="price_num">¥{{ it.tagPrice || '-' }}</view>
                  </view>
                  <view class="subtitle">款式编码：{{ it.spuCode || '-' }}</view>
                  <view class="subtitle">商品条码：{{ it.skuCode || '-' }}</view>
                  <view class="subtitle liibi_btm">
                    <view>{{ it.colorDetailName || '-' }}；{{ it.commoditySize }}</view>
                    <view>x{{ it.orderQty || '-' }}</view>
                  </view>
                </view>
              </view>
            </template>
          </view>
          <view class="look_more" v-if="pageDetails?.purchaseOrderCommodityList?.length > 3" @click="toggleFlagChange"
            :style="{ background: expandFlag ? 'linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 100%)' : '' }">
            {{ expandFlag ? '展开更多' : '收起' }}<u-icon color="inherit" size="14"
              :name="!expandFlag ? 'arrow-up' : 'arrow-down'"></u-icon>
          </view>
        </view>
        <view class="total_amount_box">
          <view>采购金额：<text class="amount_style">¥{{ amountInfo?.totalAmount }}</text></view>
        </view>
        <view class="list_item_info">
          <view class="lif_item">
            <view class="lifi_top">订单号：</view>
            <view class="lifi_main flex-row">
              <text style="margin-right: 8rpx;">{{ pageDetails.purchaseOrderCode || '-' }}</text>
              <up-copy :content="pageDetails.purchaseOrderCode || '-'">
                <text style="color:#42bac3">点击复制</text>
              </up-copy>
            </view>
          </view>
          <view class="lif_item">
            <view class="lifi_top">大类：</view>
            <view class="lifi_main">{{ pageDetails.firstClassName || '-' }}</view>
          </view>
          <view class="lif_item">
            <view class="lifi_top">供应链交期：</view>
            <view class="lifi_main">{{ pageDetails.deliveryTime || '-' }}</view>
          </view>
        </view>
      </view>
      <!-- #ifndef H5 -->
      <view class="list_item contract_box" v-if="pageDetails.contractStatus == 0">
        <view class="icon_contract">
          <image :src=contractImg alt="" />
        </view>
        <view class="contract_box_main">
          <view class="cbm_title">订单合同待提交</view>
          <view class="cbm_code">
            <view class="cbmcode_t">合同编号：</view>
            <up-copy :content="pageDetails.contractCode || '-'">
              <view class="cbmcode_b" style="color:#42bac3">{{ pageDetails.contractCode || '-' }}
              </view>
            </up-copy>
          </view>
        </view>
        <view class="contract_btn" @click="sendContract()">
          <view>提交</view>
        </view>
      </view>
      <!-- #endif -->
      <!-- #ifdef H5 -->
      <view class="list_item contract_box" v-if="pageDetails.contractStatus == 1">
        <view class="icon_contract">
          <image :src=contractImg alt="" />
        </view>
        <view class="contract_box_main">
          <view class="cbm_title">订单合同待签署</view>
          <view class="cbm_code">
            <view class="cbmcode_t">合同编号：</view>
            <up-copy :content="pageDetails.contractCode || '-'">
              <view class="cbmcode_b" style="color:#42bac3">{{ pageDetails.contractCode || '-' }}
              </view>
            </up-copy>
          </view>
        </view>
        <view class="contract_btn" @click="downloadContract(pageDetails)">
          <view>下载</view>
        </view>
      </view>
      <!-- #endif -->

      <view class="navigate_card_box">
        <view class="service_data">
          <view class="data_card">
            <view class="dc_l" @click="gotoProcess">
              <view class="header">
                <view class="dcrl_text">生产进度</view>
                <image :src=gotoImg />
              </view>
              <view class="dcrt_sub">累计成品数：{{ numberInfo.totalQty }}</view>
              <view class="dcrt_sub">生产节点：{{ numberInfo.stage || '-' }}</view>
            </view>
            <view class="dc_r">
              <!-- #ifndef H5 -->
              <view class="dcr_t" @click="gotoQC">
                <view class="header">
                  <view class="dcrt_text">执行QC</view>
                  <image :src=gotoImg />
                </view>
              </view>
              <!-- #endif -->
              <!-- #ifdef H5 -->
              <view class="dcr_t" @click="gotoReplyQC">
                <view class="header">
                  <view class="dcrt_text">回复QC</view>
                  <image :src=gotoImg />
                </view>
              </view>
              <!-- #endif -->
              <view class="dcr_b" @click="gotoBill">
                <view class="header">
                  <view class="dcrt_text">预约发货单</view>
                  <image :src=gotoImg />
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view :style="{ height: '50px'}"></view>
    </scroll-view>
    <up-modal :show="modalShow" showCancelButton closeOnClickOverlay :title="modalTitle" @cancel="modalCancel"
      @close="modalCancel" @confirm="modalConfirm"></up-modal>
  </view>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import HTTP from "@/utils/http"
import contractImg from "@/static/images/index/contract.png"
// #ifdef H5
import { saveAs } from 'file-saver'
// #endif
import gotoImg from "@/static/images/index/goto.png"
import { onLoad } from "@dcloudio/uni-app";
import useScreenSize from "@/hooks/useScreenSize";
const { windowHeight, NavBarHeight, isIphoneX } = useScreenSize()
const navigateBack = () => {
  uni.navigateBack()
}
const navigateHome = () => {
  uni.switchTab({ url: "/pages/index/index" })
}
let pageId: string
let purchaseOrderCode: string
let pageDetails = ref<Record<string, any>>({})
let pageList = ref<any[]>([])
let numberInfo = ref<Record<string, any>>({})
let amountInfo = ref<Record<string, any>>({})
const ORDER_STATUS_TEXT: { [k: number | string]: string } = {
  0: '待提交',
  1: '待审核',
  2: '生产中',
  3: '已完成',
  4: '已取消',
  null: '-',
}
const ORDER_COLOR_MAP: { [k: number | string]: any } = {
  0: '#13c2c2',
  1: '#1677ff',
  2: '#1d39c4',
  3: '#52c41a',
  4: '#ff4d4f',
  null: '#1677ff'
}
//获取页面id
onLoad((options: any) => {
  pageId = options.id || ""
  purchaseOrderCode = options.purchaseOrderCode || ""
})
onMounted(() => {
  getPageDetail()
  getList()
  getNumber()
  getAmount()
})
// #ifdef H5
const downloadContract = (info: any) => {
  console.log(info, 'info');
  HTTP.POST({
    url: "sop/sop/purchase/contract/printContract",
    isJson: true,
    data: { contractCode: info.contractCode },
    success: (res: any) => {
      if (res.code == 200 && res.data) {
        downloadByOwnUrl(res.data)
      }
    },
    complete: () => {
    }
  })
}
const downloadByOwnUrl = (url: string) => {
  const match = url.match(/[^/]+$/)
  if (match) {
    const part = match[0]
    const dot = part.split('.')
    const name = dot[0]?.split('_')?.[0]
    const extension = dot[1]
    const fileurlname = name + '.' + extension
    fetch(url)
      .then((response) => response.blob())
      .then((blob) => saveAs(blob, fileurlname))
      .catch((error) => console.error(error))
  } else {
    return url
  }
}
// #endif

// 控制展开/折叠
const expandFlag = ref(true)
const toggleFlagChange = () => {
  expandFlag.value = !expandFlag.value
}
const getPageDetail = () => {
  HTTP.POST({
    url: "sop/sop/purchase/order/getPurchaseOrderDetail",
    isJson: true,
    data: pageId,
    success: (res: any) => {
      if (res.code == 200) {
        pageDetails.value = { ...res.data }
      }
    },
    complete: () => {

    }
  })
}
const getList = () => {
  HTTP.POST({
    url: "sop/sop/purchase/order/commodity/getPurchaseCommodity",
    isJson: true,
    data: { purchaseOrderCode },
    success: (res: any) => {
      if (res.code == 200) {
        pageList.value = res.data || []
      }
    },
    complete: () => {

    }
  })
}
const getNumber = () => {
  HTTP.POST({
    url: "sop/sop/purchase/produce/schedule/summarize",
    isJson: true,
    data: { purchaseOrderCode },
    success: (res: any) => {
      if (res.code == 200) {
        numberInfo.value = res.data
      }
    },
    complete: () => {

    }
  })
}
const getAmount = () => {
  HTTP.POST({
    url: "sop/sop/purchase/order/getPurchaseSummarize",
    isJson: true,
    data: { purchaseOrderCode },
    success: (res: any) => {
      if (res.code == 200) {
        amountInfo.value = res.data
      }
    },
    complete: () => {

    }
  })
}
//Modal
const modalShow = ref(false)
const modalTitle = ref("确认要提交合同吗？")
const modalCancel = () => {
  modalShow.value = false
}
const modalConfirm = () => {
  HTTP.POST({
    url: "sop/sop/purchase/contract/submitContract",
    isJson: true,
    data: { contractIds: [pageDetails.value.contractId] },
    success: (res: any) => {
      if (res.code == 200) {
        uni.showToast({
          title: '操作成功',
          icon: 'none',
        })
        getPageDetail()
      }
    },
    complete: () => {
      modalCancel()
    }
  })
}
// actions
const sendContract = () => {
  modalShow.value = true
}
const gotoProcess = () => {
  uni.navigateTo({ url: "/pages/purchase/process?purchaseOrderCode=" + pageDetails.value.purchaseOrderCode + "&status=" + pageDetails.value.status })
}
const gotoQC = () => {
  uni.navigateTo({ url: "/pages/purchase/qc?purchaseOrderCode=" + pageDetails.value.purchaseOrderCode })
}
const gotoReplyQC = () => {
  uni.navigateTo({ url: "/pages/purchase/qc?purchaseOrderCode=" + pageDetails.value.purchaseOrderCode + "&isReply=1" })
}
const gotoBill = () => {
  uni.navigateTo({ url: "/pages/purchase/bill?purchaseOrderCode=" + pageDetails.value.purchaseOrderCode })
}
</script>
<style lang="scss" scoped>
.text_ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page_wrap_container {
  display: flex;
  flex-direction: column;

  .actions_wrap {
    height: 100rpx;
    background-color: #fff;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    position: fixed;
    width: 100%;
    z-index: 10;

    .ac_left {
      padding: 0 20rpx;
      max-width: 230rpx;
      flex-shrink: 0;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #666;
      gap: 6rpx;

      .ac_left_text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .ac_center {
      flex: 1;
    }

    .ac_right {
      width: 100rpx;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-shrink: 0;

      .ac_right_img {
        width: 50rpx;
        height: 50rpx;
      }
    }
  }

  .purchase_page_list {

    .has_data_text {
      color: #aaa;
      text-align: center;
    }

    .list_item {
      margin: 24rpx 24rpx 0;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      margin-bottom: 24rpx;
      border-radius: 18rpx;
      box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.08);
      overflow: hidden;

      .list_item_header {
        padding: 0 20rpx;
        height: 80rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #f1f1f1;

        .lih_title {
          flex: 1;
          font-weight: 500;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          font-size: 34rpx;
        }

        .lih_tag {
          flex-shrink: 0;
        }
      }

      .list_item_img_box {
        position: relative;
        padding: 24rpx 20rpx;

        .liib_item {
          display: flex;
          flex-direction: column;
          margin-bottom: 12rpx;

          .liibi_main {
            display: flex;

            .lm_imgbox {
              width: 120rpx;
              height: 120rpx;
              margin-top: 8rpx;
              border-radius: 6rpx;
              overflow: hidden;
              flex-shrink: 0;

              image {
                width: 100%;
                height: 100%;
              }
            }

            .lm_textbox {
              flex: 1;
              padding-left: 12rpx;
              font-size: 28rpx;

              .liibi_title_box {
                font-size: 30rpx;
                color: #333;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .left_main_title {
                  max-width: 400rpx;
                  font-weight: 500;
                }

                .price_num {
                  font-weight: 500;
                }
              }

              .subtitle {
                color: #888;
              }

              .liibi_btm {
                display: flex;
                align-items: center;
                justify-content: space-between
              }

            }
          }
        }

        .look_more {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          font-size: 28rpx;
          color: $uni-color-primary;
          margin-right: 4rpx;
          position: absolute;
          left: 0;
          right: 0;
          bottom: -20rpx;
          padding-top: 100rpx;
        }
      }

      .total_amount_box {
        display: flex;
        justify-content: flex-end;
        letter-spacing: .03em;
        align-items: center;
        padding: 20rpx;
        padding-bottom: 26rpx;
        font-size: 28rpx;
        color: #666;

        .amount_style {
          color: goldenrod;
        }
      }

      .list_item_info {
        display: flex;
        flex-direction: column;
        padding: 20rpx;
        padding-top: 0;
        font-size: 26rpx;

        .lif_item {
          flex: 1;
          flex-shrink: 0;
          display: flex;
          align-items: center;
          margin-bottom: 12rpx;

          .lifi_top {
            margin-right: 12rpx;
            color: #888;
          }

          .lifi_main {
            color: #888;
          }

          .flex-row {
            display: flex;
            align-items: center;
          }
        }
      }

      .actions_box {
        border-top: 1px solid #f1f1f1;
        padding: 20rpx 10rpx;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 6rpx;

        .ab_btn {
          font-size: 30rpx;
          padding: 10rpx;
          color: $uni-color-primary;
          border: 1px solid $uni-color-primary;
        }
      }
    }

    .contract_box {
      padding: 24rpx;
      display: flex;
      flex-direction: row;
      align-items: center;

      .icon_contract {
        width: 80rpx;
        height: 80rpx;
        background-color: $uni-color-primary;
        border-radius: 50%;
        flex-shrink: 0;

        image {
          width: 100%;
          height: 100%;
          transform: scale(.7)
        }
      }

      .contract_box_main {
        margin: 0 12rpx;
        line-height: 46rpx;
        flex: 1;

        .cbm_title {
          font-weight: 500;
          font-size: 30rpx;
          color: #333;
        }

        .cbm_code {
          width: 100%;
          font-size: 26rpx;
          color: #666;
          display: flex;
          align-items: center;
          overflow: hidden;

          .cbmcode_t {
            max-width: 140rpx;
          }

          .cbmcode_b {
            max-width: 300rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }

      .contract_btn {
        flex-shrink: 0;
        width: 100rpx;
        border-radius: 16rpx;
        border: 1px solid $uni-color-primary;
        font-size: 30rpx;
        color: $uni-color-primary;
        background-color: #fff;
        text-align: center;
        padding: 6rpx 12rpx;
      }
    }
  }

  .empty_wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}

.status_wrap_pop {
  padding: 30rpx;
  min-height: 300rpx;

  .pop_actions {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .reset_btn {
      color: #888;
      padding: 12rpx;
    }

    .confirm_btn {
      color: $uni-color-primary;
      padding: 12rpx;
    }
  }

  .status_item {
    .status_item_title {
      padding: 30rpx 0;
      font-size: 36rpx;
      font-weight: 400;
      color: #333;
    }

    .status_item_btns_box {
      display: flex;
      flex-wrap: wrap;
      gap: 18rpx;

      .status_item_btn {
        border: 1px solid #ddd;
        padding: 10rpx 20rpx;
        color: #666;
      }

      .status_item_btn_active {
        border: 1px solid $uni-color-primary;
        background-color: $uni-color-primary;
        color: #fff;
      }
    }
  }
}

.form_wrap {
  width: 100%;
  padding: 24rpx 30rpx;
}

.navigate_card_box {
  .service_data {
    margin: 24rpx;
    padding: 24rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #363a44;
    line-height: 45rpx;
    background-color: #fff;
    border-radius: 12rpx;

    .sd_top {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .sd_top .sdtop_title {
      font-weight: 600;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-size: 32rpx;
    }

    .sd_top .out_box {
      width: 240rpx;
      height: 72rpx;
      background: #e7f4ff;
      border-radius: 12rpx;
      display: flex;
      align-items: center;
      padding: 0 20rpx;
      justify-content: space-around;
    }

    .out_box .out_image {
      width: 34rpx;
      height: 34rpx;
      flex-shrink: 0;
    }

    .data_card {
      display: flex;
      justify-content: space-between;
      gap: 24rpx;
    }

    .data_card .dc_l {
      height: 285rpx;
      flex: 1;
      border-radius: 8rpx;
      border: 1rpx solid;
      border-image: linear-gradient(180deg, rgba(251, 225, 205, 1), rgba(249, 245, 242, 0)) 1 1;
      background: linear-gradient(225deg, #fff7f2 0%, rgba(249, 245, 242, 0) 100%);
      display: flex;
      flex-direction: column;
      gap: 20rpx;
      box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.08);
      padding: 24rpx;

      .dcrl_text {
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 500;
        color: #666;
        font-size: 30rpx;
      }

      .dcrt_sub {
        font-weight: normal;
        line-height: 50rpx;
        font-size: 24rpx;
        color: #999;
      }

    }

    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;

      image {
        width: 42rpx;
        height: 42rpx;
        flex-shrink: 0;
      }
    }

    .dc_l .dcl_text {
      font-size: 30rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #686b73;
    }

    .data_card .dc_r {
      height: 285rpx;
      flex: 1;
      border-radius: 8rpx;
      display: flex;
      flex-direction: column;
      gap: 24rpx;

      .dcrt_text {
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #686b73;
        font-size: 30rpx;
      }
    }

    .dc_r .dcr_t {
      height: 131rpx;
      border: 1rpx solid;
      border-image: linear-gradient(180deg, rgba(209, 242, 238, 1), rgba(237, 246, 245, 0)) 1 1;
      background: linear-gradient(217deg, #edf6f5 0%, rgba(237, 246, 245, 0) 100%);
      box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.08);
      border-radius: 8rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 0 24rpx;
    }

    .dc_r .dcr_b {
      height: 131rpx;
      border: 1rpx solid;
      border-image: linear-gradient(180deg, rgba(230, 226, 252, 1), rgba(244, 242, 255, 0)) 1 1;
      background: linear-gradient(210deg, #f4f2ff 0%, rgba(244, 242, 255, 0) 100%);
      box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.08);
      border-radius: 8rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 0 24rpx;
    }
  }
}
</style>